<template>
  <a-config-provider :locale="locale">
    <router-view />
    <!-- <a-modal v-model:visible="visible" title="方盒子" :closable="false" :maskClosable="false">
      欢迎使用方盒子页面，下面将加入全屏模式，【F11】或【ESC】退出。
      <template #footer>
        <a-button key="submit" type="primary" @click="handleOk">开始使用</a-button>
      </template>
    </a-modal> -->
  </a-config-provider>
</template>
<script lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import screenfull from "screenfull";

import "dayjs/locale/zh-cn";

import { versionQuery } from "@/utils/localStorage";
dayjs.locale("zh-cn");

export default {
  name: "App",
  setup() {
    const locale = ref(zhCN);
    const isFullscreen = ref<boolean>(false);
    const visible = ref<boolean>(true);

    const showModal = () => {
      visible.value = true;
    };

    // const handleOk = (e: MouseEvent) => {
    //   console.log(e);
    //   visible.value = false;
    //   toggleFullscreen()
    // };

    // const toggleFullscreen = () => {
    //   if (screenfull.isEnabled) {
    //     screenfull.request().then(() => {
    //       isFullscreen.value = true;
    //     }).catch(() => {
    //       // 处理请求全屏失败的情况
    //     });
    //   }
    // };

    const handleFullscreenChange = () => {
      isFullscreen.value = screenfull.isFullscreen;
      console.log("Fullscreen changed:", screenfull.isFullscreen);
    };
    onMounted(() => {
      // 监听全屏状态变化
      screenfull.on("change", handleFullscreenChange);
    });

    onUnmounted(() => {
      // 清理事件监听器
      screenfull.off("change", handleFullscreenChange);
    });

    // 查询报表
    versionQuery();

    return {
      locale,
      isFullscreen,
      visible,
      showModal,
    };
  },
};
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
